<template>
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible.sync="showDialog"
      @close="close"
      width="900px"
    >
      <el-row>
        <el-col :span="6"
          >【题型】：{{
            data.catalogID == 1
              ? '单选题'
              : data.catalogID == 2
              ? '多选题'
              : '简答题'
          }}</el-col
        >
        <el-col :span="6">【编号】：{{ data.id }}</el-col>
        <el-col :span="6"
          >【难度】：{{
            data.difficulty == 1
              ? '一般'
              : data.difficulty == 2
              ? '简单'
              : '困难'
          }}</el-col
        >
        <el-col :span="6">【标签】：{{ data.tags }}</el-col>
        <el-col :span="6">【学科】：{{ data.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ data.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ data.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <div style="color:blue" v-html="data.question"></div>
      <div>
        <div>
          {{
            data.questionType == 1
              ? '单选'
              : data.questionType == 2
              ? '多选'
              : '简答题'
          }}
          选项：（以下选中的选项为正确答案）
        </div>
        <div
          v-for="item in data.options"
          :key="item.code"
          style="padding:8px 0"
        >
          <el-radio
            v-if="data.questionType == 1"
            :value="item.isRight"
            :label="1"
            >{{ item.title }}</el-radio
          >
          <el-checkbox
            v-if="data.questionType === '2'"
            :value="item.isRight ? true : false"
            >{{ item.title }}</el-checkbox
          >
          <el-input type="textarea" v-if="data.questionType === '3'"></el-input>
        </div>
      </div>
      <hr />
      【参考答案】：<el-button type="danger" @click="preivewVideo()"
        >视频答案预览</el-button
      >
      <div class="video" v-if="play">
        <video ref="video" :src="data.videoURL" controls></video>
      </div>
      <hr />
      【答案解析】：
      <div style="display:inline-block" v-html="data.answer"></div>
      <hr />
      【题目备注】：{{ data.remarks }}
      <div slot="footer">
        <el-button type="primary" @click="btnClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import { detail } from '../../api/hmmm/questions'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    rows: {}
  },
  data() {
    return {
      dataid: this.$route.query.id,
      questionId: '',
      data: {},
      play: false,
      userid: ''
    }
  },
  created() {
    this.questionDetails()
  },
  methods: {
    preivewVideo() {
      this.play = true
      // this.$refs.video.play()
    },
    close(row) {
      // console.log(row)
      this.rows = row
      this.questionDetails()
      this.$emit('update:showDialog', false)
      this.play = false
    },
    btnClose() {
      this.close()
      this.$emit('update:showDialog', false)
    },
    async questionDetails() {
      // this.data = this.rows
      // 遍历之前需要判断要遍历的对象是否存在，不然会报 Cannot read property 'forEach' of undefined
      if (!this.rows.questionIDs) {
        return
      }
      this.rows.questionIDs.forEach(item => {
        this.questionId = item.id
      })
      const { data } = await detail({ id: this.questionId })
      console.log(data)
      this.data = data
    },
    aaa(row) {
      this.userid = row.id
      // console.log(row.id)
    }
  }
}
</script>

<style scoped lang="scss">
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
